<template>
  <el-form :inline="true" :model="form" class="dan-form" ref="searchForm">
    <el-form-item v-for="(item,index) in gridSearch" :key="item.field + index" :prop="item.field">
      <el-select :size="isPicker ? 'mini' :'small'" :key="'label' + item.field + index" v-model="item.fieldValue" @change="(val)=>changeField(val,index)" class="search-select-field">
        <el-option
          v-for="options in searchField"
          :key="item.field + index + options.value"
          :label="options.label"
          :value="options.value">
        </el-option>
      </el-select>
      <el-input :size="isPicker ? 'mini' :'small'" v-if="item.type=='text' || item.type == 'textarea' || item.type == 'number' || item.searchType=='text'"  :key="item.field + index"  v-model="item.value" :placeholder="item.placeholder" class="search-text" clearable></el-input>
      <el-date-picker :size="isPicker ? 'mini' :'small'" v-if="!item.searchType && (item.type=='date' || item.type=='datetime')" :key="item.field + index" :type="item.type"  v-model="item.value" :placeholder="item.placeholder" class="search-text" clearable></el-date-picker>
      <el-time-picker :size="isPicker ? 'mini' :'small'" v-if="item.type=='timepicker'" :key="item.field + index" v-model="item.value" :picker-options="item.options" :placeholder="item.placeholder" class="search-select"></el-time-picker>
      <el-time-select :size="isPicker ? 'mini' :'small'" v-if="item.type=='timeselect'" :key="item.field+ index" v-model="item.value" :picker-options="item.options" :placeholder="item.placeholder" class="search-select"></el-time-select>
      <el-date-picker :size="isPicker ? 'mini' :'small'" v-if="item.type=='datetimerange' || item.searchType=='datetimerange'" unlink-panels :key="item.field + index" v-model="item.value" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="search-range"></el-date-picker>
      <el-date-picker :size="isPicker ? 'mini' :'small'" v-if="item.type=='daterange'" unlink-panels :key="item.field + index" v-model="item.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="search-range"></el-date-picker>
      <template  v-if="item.type =='radio' && item.searchType !='select'">
        <el-radio v-for="radioItem in item.options" :key="item.field + radioItem.value" v-model="item.value" :label="radioItem.value">{{radioItem.label}}</el-radio>
      </template>
      <el-select v-if="item.type=='select' || item.searchType == 'select'" :key="item.field + index" v-model="item.value" :placeholder="item.placeholder" :filterable="item.filterable ? true : false" class="search-select" clearable>
        <el-option
          v-for="options in item.options"
          :key="item.optionsValueField ? options[item.optionsValueField] : options.value"
          :label="item.optionsLabelField ? options[item.optionsLabelField] : options.label"
          :value="item.optionsValueField ? options[item.optionsValueField] : options.value">
        </el-option>
      </el-select>
      <el-cascader :size="isPicker ? 'mini' :'small'" v-if="item.type =='cascaderRadio'" v-model="item.value" :options="item.options" :props="{ checkStrictly: item.checkStrictly ? true : false,multiple : item.multiple ? true : false }" class="form-input" :show-all-levels="item.showLast ? false : true" filterable clearable></el-cascader>
       <template v-if="item.type=='selectdata'">
        <el-select :size="isPicker ? 'mini' :'small'" v-model="item.value" :key="item.field + index" :placeholder="item.placeholder" :filterable="item.filterable === false ? false : true" class="search-select" clearable>
            <template v-for="group in item.options">
            <el-option-group
              v-if="item.children && item.children.length > 0"
              :key="item.field + index + group.value"
              :label="group.label">
                <el-option
                  v-for="optionItem in group.children"
                  :key="item.optionsValueField ? optionItem[item.optionsValueField] : optionItem.value"
                  :label="item.optionsLabelField ? optionItem[item.optionsLabelField] : optionItem.label"
                  :value="item.optionsValueField ? optionItem[item.optionsValueField] : optionItem.value">
                </el-option>
              </el-option-group>
              <el-option
                v-else
                :key="item.field + index + (item.optionsValueField ? group[item.optionsValueField] : group.value)"
                :label="item.optionsLabelField ? group[item.optionsLabelField] : group.label"
                :value="item.optionsValueField ? group[item.optionsValueField] : group.value">
              </el-option>
            </template>
        </el-select>
      </template>
    </el-form-item>
    <el-form-item>
      <el-button :size="isPicker ? 'mini' :'small'" v-if="gridSearch.length > 0" class="search-btn" @click="resetSearch('searchForm')">重置</el-button>
      <el-button :size="isPicker ? 'mini' :'small'" v-if="gridSearch.length > 0" class="search-btn" type="primary" @click="search">搜索</el-button>
    </el-form-item>
  </el-form>
</template>
<style scoped>
  .data-tool{display: flex;flex-wrap: wrap;justify-content: space-between;}
  .search-text, .search-select {width:180px;margin-right:20px;}
  .search-range {margin-right:20px;}
  .search-select-field{width:140px;margin-right:10px}
  .search-btn{margin-bottom:20px;}
</style>
<script>
import {getSelectData,getTreeData } from '@/api/common.js';
export default {
  created(){
    this.init();
    //this.resetSearch();
  },
  props:{
    /*
    gridSearch:{
      type:Array,
      default(){
        return [];
      }
    },
    searchField:{
      type:Array,
      default(){
        return [];
      }
    },*/
    isPicker:{
      type:Boolean,
      default(){
        return false;
      }
    },
    gridField:{
      type:Array,
      default(){
        return [];
      }
    },
    gridFieldSub:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  data(){
    return {
      gridSearch:[],
      form:{},
      searchField:[],
      defaultIndexArr:[]
    }
  },
  methods:{
    init(){
      this.searchField = [];
      this.gridSearch = [];
      this.gridField.forEach(item=> {
        //处理搜索栏
        if (item.isSearch) {
          this.searchField.push({label:item.label,value:item.field});
          item.fieldValue = item.field ;
          if ( item.isSearchDefault) {
            this.gridSearch.push({...item});
            this.defaultIndexArr.push(item.field);
          }
        }
      });
      this.gridFieldSub.forEach((group,groupIndex) => {
        group.fields.forEach(item=>{
          //处理搜索栏
          if (item.isSearch) {
            this.searchField.push({label:item.label,value:item.field});
            item.fieldValue = item.field ;
            if ( item.isSearchDefault) {           
              this.gridSearch.push({...item});
              this.defaultIndexArr.push(item.field);
            }
          }
        });
      });
      this.gridSearch.forEach((item,index)=>{
        this.form[item.field] = '';
        this.$set(this.form,item.field,'');
        this.initRemoteData(item);
      });
    },
    initRemoteData(item){
      if (item.type == 'selectdata'){
        this.getSelectData(item);
      }
      if (item.type == 'treeRadio'){
        this.getTreeData(item);
      }
      if (item.type == 'cascaderRadio'){
        this.getCascaderData(item);
      }
    },
    getSelectData(item){
      //获取下拉选择数据的数据源
      if (item.dataController) {
        getSelectData(item.dataController).then(data=>{
          this.gridSearch.forEach((searchGridItem,searchGridIndex)=>{
            if (item.field == searchGridItem.field){
              this.$set(this.gridSearch[searchGridIndex],'options',data);
            }
          });
        });
      }
    },
    getTreeData(item){
      //获取下拉选择数据的数据
      if (item.dataController) {
        getTreeData(item.dataController,1).then(data=>{
          this.gridSearch.forEach((searchGridItem,searchGridIndex)=>{
            if (item.field == searchGridItem.field){
              this.$set(this.gridSearch[searchGridIndex],'options',data);
            }
          });
        });
      }
    },
    getCascaderData(item){
      //获取下拉选择数据的数据
      if (item.dataController) {
        getTreeData(item.dataController).then(data=>{
          this.gridSearch.forEach((searchGridItem,searchGridIndex)=>{
            if (item.field == searchGridItem.field){
              this.$set(this.gridSearch[searchGridIndex],'options',data);
            }
          });
        });
      }
    },
    resetSearch(){
      this.gridSearch.forEach(search=>{
        this.$set(search,'value', '');
      })
      this.$emit('update:gridSearch',this.gridSearch);
      this.$emit('search');
    },
    search(){
      this.$emit('update:gridSearch',this.gridSearch);
      this.$emit('search');
    },
    changeField(field,index){
      this.gridField.forEach(itemData=>{
        let item = {...itemData}
        if (item.field == field) {
            item.fieldValue = field;
            item.value = '';
            this.initRemoteData(item);
            this.$set(this.gridSearch,index,item);
        }
      });
      //this.$set(this.gridSearch,index,this.gridSearch[index]);
      //this.$emit('update:gridSearch',this.gridSearch);
      //this.init();
    }
  },
  components:{

  }
}


</script>